<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue基础 | 上课讲义</title>
    <meta name="description" content="A VitePress site">
    <link rel="stylesheet" href="/tingweipeng/assets/style.f3d4564a.css">
    <link rel="modulepreload" href="/tingweipeng/assets/chunks/image-20221208111739140.969015dd.js">
    <link rel="modulepreload" href="/tingweipeng/assets/app.bfa3a24a.js">
    <link rel="modulepreload" href="/tingweipeng/assets/vue基础_index.md.05339e1f.lean.js">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-f44a984a><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f44a984a data-v-a50780ff><div class="VPNavBar has-sidebar" data-v-a50780ff data-v-6f1d18b5><div class="container" data-v-6f1d18b5><div class="VPNavBarTitle has-sidebar" data-v-6f1d18b5 data-v-d5925166><a class="title" href="/tingweipeng/" data-v-d5925166><!--[--><!--]--><!----><!--[-->上课讲义<!--]--><!--[--><!--]--></a></div><div class="content" data-v-6f1d18b5><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6f1d18b5 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/webapis/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->webapis<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/js进阶/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->js进阶<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/ajax/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->ajax<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tingweipeng/vue基础/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->vue基础<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6f1d18b5 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6f1d18b5 data-v-e4361c82 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e4361c82><div class="item appearance" data-v-e4361c82><p class="label" data-v-e4361c82>Appearance</p><div class="appearance-action" data-v-e4361c82><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-e4361c82 data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6f1d18b5 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-f44a984a data-v-b6162a8b><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b6162a8b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-b6162a8b><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-b6162a8b>Menu</span></button><a class="top-link" href="#" data-v-b6162a8b> Return to top </a></div><aside class="VPSidebar" data-v-f44a984a data-v-a186aa16><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-a186aa16><span class="visually-hidden" id="sidebar-aria-label" data-v-a186aa16> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-a186aa16><section class="VPSidebarGroup" data-v-a186aa16 data-v-6e45c352><div class="title" data-v-6e45c352><h2 class="title-text" data-v-6e45c352>vue基础</h2><div class="action" data-v-6e45c352><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-6e45c352><!--[--><!--[--><a class="VPLink link link active" href="/tingweipeng/vue基础/" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>01-vue基础</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/vue%E5%9F%BA%E7%A1%80/day02.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>02-vue基础</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/vue%E5%9F%BA%E7%A1%80/day03.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>03-vue基础</span><!--]--><!----></a><!----><!--]--><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f44a984a data-v-d981fe29><div class="VPDoc has-sidebar has-aside" data-v-d981fe29 data-v-cfb513e0><div class="container" data-v-cfb513e0><div class="aside" data-v-cfb513e0><div class="aside-curtain" data-v-cfb513e0></div><div class="aside-container" data-v-cfb513e0><div class="aside-content" data-v-cfb513e0><div class="VPDocAside" data-v-cfb513e0 data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-afc4c1a1 data-v-2865c0b0><div class="content" data-v-2865c0b0><div class="outline-marker" data-v-2865c0b0></div><div class="outline-title" data-v-2865c0b0>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-2865c0b0><span class="visually-hidden" id="doc-outline-aria-label" data-v-2865c0b0> Table of Contents for current page </span><ul class="root" data-v-2865c0b0 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-cfb513e0><div class="content-container" data-v-cfb513e0><!--[--><!--]--><main class="main" data-v-cfb513e0><div style="position:relative;" class="vp-doc _tingweipeng_vue%E5%9F%BA%E7%A1%80_index" data-v-cfb513e0><div><h1 id="vue基础" tabindex="-1">Vue基础 <a class="header-anchor" href="#vue基础" aria-hidden="true">#</a></h1><h2 id="学习目标" tabindex="-1">学习目标 <a class="header-anchor" href="#学习目标" aria-hidden="true">#</a></h2><ul><li>了解vue是什么</li><li>知道vue-cli工具使用，能够创建一个vue项目</li><li>掌握vue的基础指令，能够完成页面基本交互</li></ul><h2 id="vue是什么" tabindex="-1">Vue是什么 <a class="header-anchor" href="#vue是什么" aria-hidden="true">#</a></h2><h3 id="目标" tabindex="-1">目标 <a class="header-anchor" href="#目标" aria-hidden="true">#</a></h3><p>能够说出<code>vue</code>是什么、什么是渐进式、什么是库和框架</p><h3 id="vue是什么-1" tabindex="-1">vue是什么 <a class="header-anchor" href="#vue是什么-1" aria-hidden="true">#</a></h3><p>vue 是一个 渐进式的 javascript 框架！</p><p>官网地址: <a href="https://cn.vuejs.org/" target="_blank" rel="noreferrer">https://cn.vuejs.org/</a> (作者: 尤雨溪)</p><h3 id="什么是渐进式" tabindex="-1">什么是渐进式 <a class="header-anchor" href="#什么是渐进式" aria-hidden="true">#</a></h3><p><img src="/tingweipeng/assets/image-20221208105530045.22392377.png" alt="image-20221208105530045" data-fancybox="gallery"></p><p>渐进式的理解</p><p>渐进式：<code>逐渐增强</code>，vue不强求你一次性在网站中运用学习所有的语法，<code>可以学一点用一点</code></p><p><img src="/tingweipeng/assets/渐进式.242196f1.png" alt="" data-fancybox="gallery"></p><h3 id="什么是框架" tabindex="-1">什么是框架？ <a class="header-anchor" href="#什么是框架" aria-hidden="true">#</a></h3><p><strong>库的理解</strong></p><ul><li>库：本质上是一些方法的集合。每次调用方法，实现一个特定的功能。 工具箱</li><li>使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。</li><li>代表：moment axios</li></ul><p><strong>框架的理解</strong></p><ul><li><p>框架，是一套完整的解决方案</p></li><li><p>使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码</p></li><li><p>代表：vue、angular、react、bootstrap</p></li></ul><p><strong>库和框架的区别</strong></p><ul><li>使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法</li><li>使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。</li></ul><h3 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-hidden="true">#</a></h3><ol><li><p>Vue是什么？</p><details><summary>答案</summary><ul><li>Vue是一个javaScript渐进式框架</li></ul></details></li><li><p>什么是渐进式？</p><details><summary>答案</summary><ul><li>渐进式就是按需逐渐集成功能使用</li></ul></details></li><li><p>什么是库和框架？</p><details><summary>答案</summary><ul><li>库是方法的集合, 一般是个js文件</li><li>框架是拥有自己一套规则和语法</li></ul></details></li></ol><h2 id="vue是-mvvm-的框架" tabindex="-1">Vue是 MVVM 的框架 <a class="header-anchor" href="#vue是-mvvm-的框架" aria-hidden="true">#</a></h2><h3 id="目标-1" tabindex="-1">目标 <a class="header-anchor" href="#目标-1" aria-hidden="true">#</a></h3><p>能够说出什么是<code>MVVM</code>框架</p><h3 id="mvvm思想" tabindex="-1">MVVM思想 <a class="header-anchor" href="#mvvm思想" aria-hidden="true">#</a></h3><ul><li><p>MVVM思想：一种软件架构模式，决定了写代码的方式。</p><ul><li>M：model数据模型(ajax获取到的数据)</li><li>V：view视图（页面）</li><li>VM：ViewModel 视图模型</li></ul></li><li><p>MVVM通过<code>数据双向绑定</code>让数据自动地双向同步 <strong>不在需要操作DOM</strong></p><ul><li>V（修改视图） -&gt; M（数据自动同步）</li><li>M（修改数据） -&gt; V（视图自动同步</li></ul></li></ul><p><img src="/tingweipeng/assets/MVVM.abc2ad36.png" alt="" data-fancybox="gallery"></p><p>之前的思想，原生 <strong>dom驱动</strong>。无论修改什么页面内容，先找对象，操作dom。</p><p>现在的思想，vue <strong>数据驱动</strong>。想更新视图，直接操作数据即可。数据变化，视图自动更新</p><p><strong>1. 在vue中，不推荐直接手动操作DOM！！！</strong></p><p><strong>2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！</strong></p><p><img src="/tingweipeng/assets/双向数据绑定.2acb851f.png" alt="" data-fancybox="gallery"></p><h3 id="小结-1" tabindex="-1">小结 <a class="header-anchor" href="#小结-1" aria-hidden="true">#</a></h3><ol><li><p>什么是 MVVM ？</p><details><summary>答案</summary><ul><li>一种软件架构模式，决定了写代码的方式。</li></ul></details></li><li><p>M、V、VM 分别是什么？</p><details><summary>答案</summary><ul><li> M：model 数据模型</li><li> V：view 视图</li><li> VM： viewModel 视图模型</li></ul></details></li><li><p>原生 和 vue 修改视图的思想分别是什么？</p><details><summary>答案</summary><ul><li> 原生：dom驱动，修改视图，操作dom</li><li> vue：数据驱动，修改数据，操作数据即可</li></ul></details></li></ol><h2 id="vue组件化思想" tabindex="-1">Vue组件化思想 <a class="header-anchor" href="#vue组件化思想" aria-hidden="true">#</a></h2><h3 id="目标-2" tabindex="-1">目标 <a class="header-anchor" href="#目标-2" aria-hidden="true">#</a></h3><p>能够说出vue组件化思想</p><h3 id="什么是组件化思想" tabindex="-1">什么是组件化思想 <a class="header-anchor" href="#什么是组件化思想" aria-hidden="true">#</a></h3><p>组件化：一个组件会包含（HTML+CSS+JS） ，完整的页面可以拆分成多个组件</p><p>组件化的优点：</p><ol><li><p>容易维护</p></li><li><p>便于复用（HTML+CSS+JS）</p></li></ol><p><img src="/tingweipeng/assets/image-20221208111739140.7e655676.png" alt="" data-fancybox="gallery"></p><h3 id="小结-2" tabindex="-1">小结 <a class="header-anchor" href="#小结-2" aria-hidden="true">#</a></h3><ol><li><p>什么是组件化？</p><details><summary>答案</summary><ul><li>将一个页面，拆分成一个个小组件的过程，就是组件化。</li><li>每个组件包含自己的 html+css+js。</li></ul></details></li><li><p>组件化的好处是什么？</p><details><summary>答案</summary><ul><li>便于维护，便于复用</li></ul></details></li></ol><h2 id="开发vue有两种方式" tabindex="-1">开发Vue有两种方式 <a class="header-anchor" href="#开发vue有两种方式" aria-hidden="true">#</a></h2><h3 id="目标-3" tabindex="-1">目标 <a class="header-anchor" href="#目标-3" aria-hidden="true">#</a></h3><p>能够说出开发vue有哪两种方式？</p><h3 id="传统开发模式" tabindex="-1">传统开发模式 <a class="header-anchor" href="#传统开发模式" aria-hidden="true">#</a></h3><p>传统开发模式：基于html/css/js文件开发vue</p><p><img src="/tingweipeng/assets/image-20210228083641377.cd61e23d.png" alt="" data-fancybox="gallery"></p><h3 id="工程化开发方式" tabindex="-1">工程化开发方式 <a class="header-anchor" href="#工程化开发方式" aria-hidden="true">#</a></h3><p>工程化开发方式：在webpack环境中开发vue，这是最推荐的方式。</p><p><img src="/tingweipeng/assets/image-20210228083746746.5945de10.png" alt="" data-fancybox="gallery"></p><p>工程化开发方式 基于 webpack！</p><h2 id="脚手架" tabindex="-1">脚手架 <a class="header-anchor" href="#脚手架" aria-hidden="true">#</a></h2><h3 id="目标-4" tabindex="-1">目标 <a class="header-anchor" href="#目标-4" aria-hidden="true">#</a></h3><p>能够说出脚手架的好处</p><h3 id="什么是脚手架概念" tabindex="-1">什么是脚手架概念 <a class="header-anchor" href="#什么是脚手架概念" aria-hidden="true">#</a></h3><p>生活中：脚手架是为了保证各施工过程顺利进行而搭设的工作平台</p><p>在代码里的体现：就是一套固定标准的, 文件夹+文件+webpack配置</p><p>@vue/cli 也叫 vue脚手架, @vue/cli 是vue官方提供的一个全局命令工具</p><p>这个命令可以帮助我们快速的创建一个vue项目的基础架子。</p><p>vue脚手架的好处：</p><ol><li><p>开箱即用</p></li><li><p>零配置（不用你配webpack）</p><p>IE采用的引用计数算法, 定义「内存不再使用」的标准很简单，就是看一个对象是否有指向它的引用。</p></li></ol><h3 id="小结-3" tabindex="-1">小结 <a class="header-anchor" href="#小结-3" aria-hidden="true">#</a></h3><ol><li><p>使用脚手架的好处是什么？</p><details><summary>答案</summary><ul><li>零配置，开箱即用，基于它快速搭建项目基本开发环境</li></ul></details></li></ol><h2 id="vue脚手架的安装" tabindex="-1">vue脚手架的安装 <a class="header-anchor" href="#vue脚手架的安装" aria-hidden="true">#</a></h2><h3 id="目标-5" tabindex="-1">目标 <a class="header-anchor" href="#目标-5" aria-hidden="true">#</a></h3><p>安装@vue/cli全局模块包, 得到Vue命令, 以后创建Vue脚手架项目</p><h3 id="步骤" tabindex="-1">步骤 <a class="header-anchor" href="#步骤" aria-hidden="true">#</a></h3><ol><li><p>全局安装@vue/cli模块包</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">yarn global add @vue/cli</span></span>
<span class="line"><span style="color:#8B949E;"># OR</span></span>
<span class="line"><span style="color:#C9D1D9;">npm install -g @vue/cli</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意: 如果半天没动静(95%都是网速问题), 可以ctrl c 中断 重来</p><ul><li>停止重新来</li><li>换一个网继续重来</li></ul></li><li><p>查看<code>Vue</code>命令版本</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">vue -V</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ol><blockquote><p>总结: 如果出现版本号就安装成功, 否则失败</p></blockquote><h3 id="小结-4" tabindex="-1">小结 <a class="header-anchor" href="#小结-4" aria-hidden="true">#</a></h3><ol><li><p>如何安装全局包？</p><details><summary>答案</summary><ul><li>yarn global add 包名 或 npm i -g 包名</li></ul></details></li><li><p>我们会得到什么？</p><details><summary>答案</summary><ul><li>终端里的命令, 例如Vue命令, 以后创建脚手架项目</li></ul></details></li></ol><h2 id="使用脚手架创建项目" tabindex="-1">使用脚手架创建项目 <a class="header-anchor" href="#使用脚手架创建项目" aria-hidden="true">#</a></h2><h3 id="目标-6" tabindex="-1">目标 <a class="header-anchor" href="#目标-6" aria-hidden="true">#</a></h3><p>能够使用脚手架创建项目并启动项目</p><h3 id="创建vue项目" tabindex="-1">创建vue项目 <a class="header-anchor" href="#创建vue项目" aria-hidden="true">#</a></h3><p>在电脑上面找个合适的目录，执行如下命令</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">vue create 项目名(不能用中文)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>第一次使用 <code>vue-cli</code> 工具时可能需要选择淘宝镜像源</p><p><img src="/tingweipeng/assets/image-20221208163927763.c9546194.png" alt="image-20221208163927763" data-fancybox="gallery"></p><p>可以上下箭头选择, 回车确定, 弄错了<code>ctrl+c</code>从第1步来</p><p><img src="/tingweipeng/assets/image-20221208163617473.7489df6b.png" alt="image-20221208163617473" data-fancybox="gallery"></p><p>第一次使用 <code>vue-cli</code> 工具时可能需要选择包管理器</p><p><img src="/tingweipeng/assets/image-20221208164134957.f878b064.png" alt="image-20221208164134957" data-fancybox="gallery"></p><p>然后回车安装即可，安装好了后</p><p><img src="/tingweipeng/assets/image-20221208171306968.789a3d36.png" alt="image-20221208171306968" data-fancybox="gallery"></p><p>cd 进入目录，启动项目, 打包项目：</p><p>启动项目：npm run serve 或 yarn serve</p><p>打包项目：npm run build 或 yarn build</p><h3 id="小结-5" tabindex="-1">小结 <a class="header-anchor" href="#小结-5" aria-hidden="true">#</a></h3><ol><li><p>如何使用<code>vue-cli</code>创建vue项目</p><details><summary>答案</summary><ul><li>`vue create 项目名称`</li></ul></details></li><li><p>vue项目如何启动？</p><details><summary>答案</summary><ul><li>npm run serve 或 yarn serve</li></ul></details></li></ol><h2 id="修改vue项目的配置文件" tabindex="-1">修改vue项目的配置文件 <a class="header-anchor" href="#修改vue项目的配置文件" aria-hidden="true">#</a></h2><h3 id="目标-7" tabindex="-1">目标 <a class="header-anchor" href="#目标-7" aria-hidden="true">#</a></h3><p>能够修改vue项目的配置文件</p><h3 id="问题引入" tabindex="-1">问题引入 <a class="header-anchor" href="#问题引入" aria-hidden="true">#</a></h3><p>我们说 @vue/cli 脚手架集成了 webpack，</p><p>但是我们怎么没有看到 <code>webpack.config.js</code> 呢？</p><ol><li>我们在项目无法找到webpack.config.js文件，因为vue把它隐藏了。</li><li>如果需要覆盖webpack的配置，可以修改<code>vue.config.js</code> 文件，覆盖webpack配置</li></ol><h3 id="示例配置" tabindex="-1">示例配置 <a class="header-anchor" href="#示例配置" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#79C0FF;">defineConfig</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">require</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;@vue/cli-service&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#79C0FF;">module</span><span style="color:#C9D1D9;">.</span><span style="color:#79C0FF;">exports</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">defineConfig</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">  transpileDependencies: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 修改端口号</span></span>
<span class="line"><span style="color:#C9D1D9;">  devServer: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    port: </span><span style="color:#79C0FF;">3000</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="小结-6" tabindex="-1">小结 <a class="header-anchor" href="#小结-6" aria-hidden="true">#</a></h3><ol><li><p>在vue脚手架中如何覆盖默认的webpack配置呢？</p><details><summary>答案</summary><ul><li>修改 vue.config.js 进行配置</li></ul></details></li></ol><h2 id="vue项目目录分析" tabindex="-1">vue项目目录分析 <a class="header-anchor" href="#vue项目目录分析" aria-hidden="true">#</a></h2><h3 id="目标-8" tabindex="-1">目标 <a class="header-anchor" href="#目标-8" aria-hidden="true">#</a></h3><p>能够说出vue项目目录的作用</p><h3 id="问题导入" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入" aria-hidden="true">#</a></h3><p>vue项目里各个文件及代码都有什么作用呢?</p><p><img src="/tingweipeng/assets/image-20221208171350001.be901045.png" alt="image-20221208171350001" data-fancybox="gallery"></p><p>项目目录各个文件的含义</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;"> vuecil-demo         </span><span style="color:#8B949E;"># 项目目录</span></span>
<span class="line"><span style="color:#C9D1D9;">    ├── node_modules </span><span style="color:#8B949E;"># 项目依赖的第三方包</span></span>
<span class="line"><span style="color:#C9D1D9;">    ├── public       </span><span style="color:#8B949E;"># 静态文件目录</span></span>
<span class="line"><span style="color:#C9D1D9;">      ├── favicon.ico# 浏览器小图标</span></span>
<span class="line"><span style="color:#C9D1D9;">      └── index.html </span><span style="color:#8B949E;"># 单页面的html文件(网页浏览的是它)</span></span>
<span class="line"><span style="color:#C9D1D9;">    ├── src          </span><span style="color:#8B949E;"># 业务文件夹</span></span>
<span class="line"><span style="color:#C9D1D9;">      ├── assets     </span><span style="color:#8B949E;"># 静态资源</span></span>
<span class="line"><span style="color:#C9D1D9;">        └── logo.png </span><span style="color:#8B949E;"># vue的logo图片</span></span>
<span class="line"><span style="color:#C9D1D9;">      ├── components </span><span style="color:#8B949E;"># 组件目录</span></span>
<span class="line"><span style="color:#C9D1D9;">        └── HelloWorld.vue </span><span style="color:#8B949E;"># 欢迎页面vue代码文件 </span></span>
<span class="line"><span style="color:#C9D1D9;">      ├── App.vue    </span><span style="color:#8B949E;"># 整个应用的根组件</span></span>
<span class="line"><span style="color:#C9D1D9;">      └── main.js    </span><span style="color:#8B949E;"># 入口js文件</span></span>
<span class="line"><span style="color:#C9D1D9;">    ├── .gitignore   </span><span style="color:#8B949E;"># git提交忽略配置</span></span>
<span class="line"><span style="color:#C9D1D9;">    ├── babel.config.js  </span><span style="color:#8B949E;"># babel配置</span></span>
<span class="line"><span style="color:#C9D1D9;">    ├── package.json </span><span style="color:#8B949E;"># 依赖包列表</span></span>
<span class="line"><span style="color:#C9D1D9;">    ├── README.md    </span><span style="color:#8B949E;"># 项目说明</span></span>
<span class="line"><span style="color:#C9D1D9;"> └── yarn.lock    </span><span style="color:#8B949E;"># 项目包版本锁定和缓存地址</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>主要文件及含义</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">node_modules      – 第三方依赖包</span></span>
<span class="line"><span style="color:#C9D1D9;">public/index.html – 浏览器运行的网页</span></span>
<span class="line"><span style="color:#C9D1D9;">src/main.js       – webpack打包的入口文件</span></span>
<span class="line"><span style="color:#C9D1D9;">src/App.vue       – Vue入口页面</span></span>
<span class="line"><span style="color:#C9D1D9;">package.json      – 依赖包列表文件和自定义命令</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="小结-7" tabindex="-1">小结 <a class="header-anchor" href="#小结-7" aria-hidden="true">#</a></h3><ol><li><p>脚手架里主要文件和作用？</p><details><summary>答案</summary><ol><li>node_modules - 都是下载的包</li><li>public/index.html - 浏览器运行的网页</li><li>src/main.js - webpack打包的入口</li><li>src/App.vue - Vue页面入口</li><li>package.json - 项目描述信息</li></ol></details></li></ol><h2 id="清理目录" tabindex="-1">清理目录 <a class="header-anchor" href="#清理目录" aria-hidden="true">#</a></h2><h3 id="目标-9" tabindex="-1">目标 <a class="header-anchor" href="#目标-9" aria-hidden="true">#</a></h3><p>能够对Vue项目进行目录清理</p><h3 id="目录分析与清理" tabindex="-1">目录分析与清理 <a class="header-anchor" href="#目录分析与清理" aria-hidden="true">#</a></h3><p><img src="/tingweipeng/assets/image-20210105120624992.7f9029a4.png" alt="" data-fancybox="gallery"></p><ol><li><p>public/index.html不用动，提供一个最基础的页面</p></li><li><p>src/main.js不用动， 渲染了App.vue组件</p></li><li><p>src/App.vue默认有很多的内容，可以全部删除</p><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;123&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li><li><p>assets 文件夹 和 components 直接删除</p></li></ol><h2 id="main-js文件的作用" tabindex="-1">main.js文件的作用 <a class="header-anchor" href="#main-js文件的作用" aria-hidden="true">#</a></h2><h3 id="目标-10" tabindex="-1">目标 <a class="header-anchor" href="#目标-10" aria-hidden="true">#</a></h3><p>能够说出 <code>main.js</code> 文件的作用</p><h3 id="main-js-文件分析" tabindex="-1">main.js 文件分析 <a class="header-anchor" href="#main-js-文件分析" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 导入 vue 核心包</span></span>
<span class="line"><span style="color:#FF7B72;">import</span><span style="color:#C9D1D9;"> Vue </span><span style="color:#FF7B72;">from</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#8B949E;">// 导入 根组件</span></span>
<span class="line"><span style="color:#FF7B72;">import</span><span style="color:#C9D1D9;"> App </span><span style="color:#FF7B72;">from</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;./App.vue&#39;</span></span>
<span class="line"><span style="color:#8B949E;">// 说明信息的配置，默认即可，不用动</span></span>
<span class="line"><span style="color:#C9D1D9;">Vue.config.productionTip </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">false</span></span>
<span class="line"><span style="color:#8B949E;">// 创建Vue 根实例，利用创建出来的根实例，渲染 index.html 的 div 盒子</span></span>
<span class="line"><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">Vue</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 使用App组件进行渲染</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">h</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">h</span><span style="color:#C9D1D9;">(App),</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">$mount</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#app&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// $mount(&#39;#app&#39;) =&gt; 挂载：得到结构后，渲染 index.html 中的 id 为 app的盒子</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="单文件组件的三个组成部分" tabindex="-1">单文件组件的三个组成部分 <a class="header-anchor" href="#单文件组件的三个组成部分" aria-hidden="true">#</a></h2><h3 id="目标-11" tabindex="-1">目标 <a class="header-anchor" href="#目标-11" aria-hidden="true">#</a></h3><p>能够说出单文件组件的三个组成部分</p><h3 id="单文件组件" tabindex="-1">单文件组件 <a class="header-anchor" href="#单文件组件" aria-hidden="true">#</a></h3><p>一个<code>.vue</code>文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。</p><p>一个单文件组件由三部分组成</p><ul><li>template： 结构 （有且只能一个根元素）</li><li>script: js逻辑</li><li>style： 样式</li></ul><p>安装插件（语法高亮）</p><p><img src="/tingweipeng/assets/image-20221208174651956.4ef5a916.png" alt="image-20221208174651956" data-fancybox="gallery"></p><p>让组件支持 less</p><ol><li><p>style标签， lang=“less”，开启less功能</p></li><li><p>装包： npm i less-loader less -D</p></li></ol><h3 id="小结-8" tabindex="-1">小结 <a class="header-anchor" href="#小结-8" aria-hidden="true">#</a></h3><ol><li>单文件组件有三个组成部分，哪三个？<details><summary>答案</summary><ol><li>template 结构</li><li>script js逻辑内容</li><li>style 样式</li></ol></details></li></ol><h2 id="vue如何提供数据" tabindex="-1">vue如何提供数据 <a class="header-anchor" href="#vue如何提供数据" aria-hidden="true">#</a></h2><h3 id="目标-12" tabindex="-1">目标 <a class="header-anchor" href="#目标-12" aria-hidden="true">#</a></h3><p>能够知道vue是如何提供数据？</p><h3 id="问题导入-1" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-1" aria-hidden="true">#</a></h3><p>vue是数据驱动的，应该如何提供数据，将来控制视图呢？</p><ol><li><p>通过 data 属性可以提供数据， data属性必须是一个函数</p></li><li><p>这个函数需要返回一个对象，这个对象就代表vue提供的数据</p></li></ol><div class="warning custom-block"><p class="custom-block-title">注意</p><p>data属性必须是一个函数</p></div><h2 id="插值表达式" tabindex="-1">插值表达式 <a class="header-anchor" href="#插值表达式" aria-hidden="true">#</a></h2><h3 id="目标-13" tabindex="-1">目标 <a class="header-anchor" href="#目标-13" aria-hidden="true">#</a></h3><p>能够使用在模板中渲染数据</p><h3 id="插值表达式的作用" tabindex="-1">插值表达式的作用 <a class="header-anchor" href="#插值表达式的作用" aria-hidden="true">#</a></h3><p>插值表达式, 小胡子语法 mustach语法<code></code></p><ol><li><p>作用: 使用 data 中的数据渲染视图（模板）</p></li><li><p>基本语法, 支持三元运算符</p><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">{{ msg }}</span></span>
<span class="line"><span style="color:#C9D1D9;">{{ obj.name }}</span></span>
<span class="line"><span style="color:#C9D1D9;">{{ msg.</span><span style="color:#D2A8FF;">toUpperCase</span><span style="color:#C9D1D9;">() }}</span></span>
<span class="line"><span style="color:#C9D1D9;">{{ obj.age </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">18</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">?</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;成年&#39;</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">:</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;未成年&#39;</span><span style="color:#C9D1D9;"> }}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li><li><p>vue中插值表达式的注意点</p><p>(1) 使用的数据在 data 中要存在</p><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span><span style="color:#FF7B72;">{</span><span style="color:#C9D1D9;">{ gaga }</span><span style="color:#FF7B72;">}</span><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>(2) 能使用表达式, 但是不能使用 if for</p><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span><span style="color:#FF7B72;">{</span><span style="color:#C9D1D9;">{ </span><span style="color:#D2A8FF;">if</span><span style="color:#C9D1D9;"> (obj.age &gt; 18 ) { }   }</span><span style="color:#FF7B72;">}</span><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>(3) 不能在标签属性中使用</p><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;box&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;box&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">title</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;{{ msg }}&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ol><h2 id="安装vue开发者工具" tabindex="-1">安装vue开发者工具 <a class="header-anchor" href="#安装vue开发者工具" aria-hidden="true">#</a></h2><h3 id="目标-14" tabindex="-1">目标 <a class="header-anchor" href="#目标-14" aria-hidden="true">#</a></h3><p>能够安装 vue 开发者工具</p><h3 id="如何安装" tabindex="-1">如何安装？ <a class="header-anchor" href="#如何安装" aria-hidden="true">#</a></h3><ol><li><p>直接通过谷歌应用商店安装 需要梯子</p></li><li><p>通过极简插件下载插件，本地拖拽到chrome 扩展程序列表中，安装即可。 <a href="https://chrome.zzzmh.cn/index" target="_blank" rel="noreferrer">https://chrome.zzzmh.cn/index</a></p></li><li><p>打开vue运行的页面，调试工具中Vue栏，即可查看修改数据，进行调试。</p><p><img src="/tingweipeng/assets/image-20221208195326522.cd0520e9.png" alt="image-20221208195326522" data-fancybox="gallery"></p></li></ol><h2 id="vue指令" tabindex="-1">Vue指令 <a class="header-anchor" href="#vue指令" aria-hidden="true">#</a></h2><h3 id="目标-15" tabindex="-1">目标 <a class="header-anchor" href="#目标-15" aria-hidden="true">#</a></h3><p>能够知道什么是vue指令</p><h3 id="什么是vue指令" tabindex="-1">什么是Vue指令 <a class="header-anchor" href="#什么是vue指令" aria-hidden="true">#</a></h3><p>Vue指令：特殊的 html 标签属性, 特点: v- 开头</p><p>每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能</p><p><img src="/tingweipeng/assets/image-20221208201025606.cbf60df8.png" alt="image-20221208201025606" data-fancybox="gallery"></p><h3 id="小结-9" tabindex="-1">小结 <a class="header-anchor" href="#小结-9" aria-hidden="true">#</a></h3><ol><li><p>什么是 vue 指令？</p><details><summary>答案</summary><ol><li>template 结构</li><li>script js逻辑内容</li><li>style 样式</li></ol></details></li></ol><h2 id="vue指令-v-bind" tabindex="-1">vue指令-v-bind <a class="header-anchor" href="#vue指令-v-bind" aria-hidden="true">#</a></h2><h3 id="目标-16" tabindex="-1">目标 <a class="header-anchor" href="#目标-16" aria-hidden="true">#</a></h3><p>能够使用<code>v-bind</code>html元素的属性</p><h3 id="v-bind指令的作用" tabindex="-1">v-bind指令的作用 <a class="header-anchor" href="#v-bind指令的作用" aria-hidden="true">#</a></h3><p>说明：插值表达式不能用在html的属性上，想要动态的设置html元素属性，需要使用v-bind指令 作用： 动态的设置html的标签属性 语法： v-bind:属性名=&quot;值&quot; 简写： :属性名=&quot;值&quot;</p><p><img src="/tingweipeng/assets/image-20221208201625099.0e04d9c8.png" alt="image-20221208201625099" data-fancybox="gallery"></p><h3 id="小结-10" tabindex="-1">小结 <a class="header-anchor" href="#小结-10" aria-hidden="true">#</a></h3><ol><li><p>v-bind指令的作用是什么？</p><details><summary>答案</summary><ol><li>动态的设置html的属性</li></ol></details></li><li><p>v-bind语法是什么？简写语法怎么写？</p><details><summary>答案</summary><ol><li>v-bind:属性名 = &#39;值&#39;</li><li>:属性名 = &#39;值&#39; （简写）</li></ol></details></li></ol><h2 id="vue指令-v-on" tabindex="-1">vue指令-v-on <a class="header-anchor" href="#vue指令-v-on" aria-hidden="true">#</a></h2><h3 id="目标-17" tabindex="-1">目标 <a class="header-anchor" href="#目标-17" aria-hidden="true">#</a></h3><p>能够使用 <code>v-on</code> 指令 注册事件</p><h3 id="问题引入-1" tabindex="-1">问题引入？ <a class="header-anchor" href="#问题引入-1" aria-hidden="true">#</a></h3><p>在vue中如何给按钮绑定点击事件呢? 可以使用<code>v-on</code>指令来实现</p><p>v-on指令</p><p>作用：注册事件 语法</p><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">v-on:事件名=“要执行的少量代码&quot;</span></span>
<span class="line"><span style="color:#C9D1D9;">v-on:事件名=“methods中的函数名&quot;</span></span>
<span class="line"><span style="color:#C9D1D9;">v-on:事件名=“methods中的函数名(实参)&quot;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>注意：事件处理函数在methods中提供</p></blockquote><div class="tip custom-block"><p class="custom-block-title">说明</p><p>简写：v-on 可以 简写 成 @</p></div><h3 id="示例代码" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码" aria-hidden="true">#</a></h3><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- </span></span>
<span class="line"><span style="color:#8B949E;">      指令：v-on</span></span>
<span class="line"><span style="color:#8B949E;">      作用：注册事件</span></span>
<span class="line"><span style="color:#8B949E;">      语法：</span></span>
<span class="line"><span style="color:#8B949E;">        1. v-on:事件名 = &quot;要执行的少量代码&quot;</span></span>
<span class="line"><span style="color:#8B949E;">           当逻辑，只有一句话，就可以执行完毕 =&gt; 少量代码，可以直接写在模板中</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">        2. v-on:事件名 = &quot;methods中的函数名&quot;</span></span>
<span class="line"><span style="color:#8B949E;">           当点击时，就会执行下面的函数</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">        3. v-on:事件名 = &#39;methods中的函数名(传参1, 传参2, ...)&#39;</span></span>
<span class="line"><span style="color:#8B949E;">     --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;银行卡余额 - {{ money }}&lt;/</span><span style="color:#7EE787;">h3</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">money</span><span style="color:#FF7B72;">++</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">&gt;搬砖&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">money </span><span style="color:#FF7B72;">+=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">&gt;搬两块砖&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">addMoney</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">&gt;开小卖部一个月&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#D2A8FF;">eat</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;销冠&#39;</span><span style="color:#C9D1D9;">)</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">&gt;请销冠吃饭&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#D2A8FF;">eat</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;秘书&#39;</span><span style="color:#C9D1D9;">)</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">&gt;请秘书吃饭&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#FF7B72;">export</span><span style="color:#FFA657;"> </span><span style="color:#FF7B72;">default</span><span style="color:#FFA657;"> {</span></span>
<span class="line"><span style="color:#FFA657;">  </span><span style="color:#8B949E;">// data 里面 用于存放 数据，只有值会经常发生变化的才会放到 data 中</span></span>
<span class="line"><span style="color:#FFA657;">  </span><span style="color:#8B949E;">// methods 里面 用于存放 方法，方法是用于调用的</span></span>
<span class="line"><span style="color:#FFA657;">  </span><span style="color:#D2A8FF;">data</span><span style="color:#FFA657;">() </span><span style="color:#C9D1D9;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      money: </span><span style="color:#79C0FF;">666</span><span style="color:#C9D1D9;">, </span><span style="color:#8B949E;">// 这里提供的所有data的属性值，都会被挂到vue实例上</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span><span style="color:#FFA657;">,</span></span>
<span class="line"><span style="color:#FFA657;">  </span><span style="color:#C9D1D9;">methods: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// methods中如果要访问或修改data中的数据，this.xxx = &#39;值&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// methods所有方法中的 this， 指向当前vue实例 （vue内部绑好了）</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 存放记录所有的方法</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">addMoney</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 租金 -3000  人工 -4000  账面收入 20000</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.money </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.money </span><span style="color:#FF7B72;">-</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">3000</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">-</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">4000</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20000</span></span>
<span class="line"><span style="color:#C9D1D9;">    },</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">eat</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">person</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (person </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;销冠&#39;</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;呀，销冠来了，请个海底捞&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.money </span><span style="color:#FF7B72;">-=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1000</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (person </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;秘书&#39;</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;呦，你来了~ 秘书&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.money </span><span style="color:#FF7B72;">-=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10000</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#FFA657;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br></div></div><h3 id="小结-11" tabindex="-1">小结 <a class="header-anchor" href="#小结-11" aria-hidden="true">#</a></h3><ol><li>v-on指令的作用是什么？ <details><summary>答案</summary><ul><li>注册事件</li></ul></details></li><li>v-on指令的三个语法是什么？ <details><summary>答案</summary><ul><li>v-on:事件名=&quot;要执行的少量代码&quot;</li><li>注册事件</li><li>注册事件</li></ul></details></li><li>v-on指令的简写语法是什么？ <details><summary>答案</summary><ul><li>@事件名 = &#39;xxx&#39;</li></ul></details></li></ol><h2 id="vue中获取事件对象-了解" tabindex="-1">Vue中获取事件对象（了解） <a class="header-anchor" href="#vue中获取事件对象-了解" aria-hidden="true">#</a></h2><h3 id="目标-18" tabindex="-1">目标 <a class="header-anchor" href="#目标-18" aria-hidden="true">#</a></h3><p>了解在Vue中如何获取事件对象</p><h3 id="问题导入-2" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-2" aria-hidden="true">#</a></h3><p>默认a标签点击会跳走, 希望阻止默认的跳转, 应该如何操作呢？如何阻止默认行为呢？</p><p>语法：e.preventDefault()</p><p>vue中如何获取事件对象呢？</p><p>(1) 没有传参, 通过形参接收 e</p><p>(2) 传参了, 通过$event指代事件对象 e</p><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;app&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">fn</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;http://www.baidu.com&quot;</span><span style="color:#C9D1D9;">&gt;去百度&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#D2A8FF;">fn2</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">100</span><span style="color:#C9D1D9;">, $event)</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;http://www.baidu.com&quot;</span><span style="color:#C9D1D9;">&gt;去百度2&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#FF7B72;">export</span><span style="color:#FFA657;"> </span><span style="color:#FF7B72;">default</span><span style="color:#FFA657;"> {</span></span>
<span class="line"><span style="color:#FFA657;">  </span><span style="color:#C9D1D9;">methods: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    },</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">fn2</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">num</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#FFA657;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="小结-12" tabindex="-1">小结 <a class="header-anchor" href="#小结-12" aria-hidden="true">#</a></h3><ol><li><p>vue中如何获取事件对象呢？</p><details><summary>答案</summary><ul><li>没有传参, 通过形参接收 e</li><li>传参了, 通过$event指代事件对象 e</li></ul></details></li></ol><h2 id="v-on-事件修饰符" tabindex="-1">v-on 事件修饰符 <a class="header-anchor" href="#v-on-事件修饰符" aria-hidden="true">#</a></h2><h3 id="目标-19" tabindex="-1">目标 <a class="header-anchor" href="#目标-19" aria-hidden="true">#</a></h3><p>能够使用<code>v-on</code> 事件修饰符</p><h3 id="问题导入-3" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-3" aria-hidden="true">#</a></h3><p>e.preventDefault()单词很长不好写吧?</p><p>有没有一种更简单的方式实现呢?</p><p>事件修饰符：vue提供事件修饰符，可以快速阻止默认行为或阻止冒泡</p><p>.prevent 阻止默认行为</p><p>.stop 阻止冒泡</p><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;div id=&quot;app&quot;&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;a @click.prevent=&quot;fn&quot; href=&quot;http://www.baidu.com&quot;&gt;去百度&lt;/a&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/div&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="v-on-按键修饰符" tabindex="-1">v-on 按键修饰符 <a class="header-anchor" href="#v-on-按键修饰符" aria-hidden="true">#</a></h2><h3 id="目标-20" tabindex="-1">目标 <a class="header-anchor" href="#目标-20" aria-hidden="true">#</a></h3><p>能够使用<code>v-on</code> 按键修饰符</p><h3 id="问题导入-4" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-4" aria-hidden="true">#</a></h3><p>我想判断用户是否按下回车了怎么做？</p><p>e.key === &#39;Enter&#39;</p><p>在监听键盘事件时，我们经常需要判断详细的按键。可用按键修饰符。</p><p>需求: 用户输入内容, 回车时, 打印输入的内容。</p><ul><li><p>@keyup.enter 监听回车键</p></li><li><p>@keyup.esc 监听返回键</p></li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;div id=&quot;app&quot;&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;input type=&quot;text&quot; @keyup=&quot;fn&quot;&gt; &lt;hr&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;input type=&quot;text&quot; @keyup.enter=&quot;fn2&quot;&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/div&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：</p><ul><li><code>.enter</code></li><li><code>.tab</code></li><li><code>.delete</code> (捕获“删除”和“退格”键)</li><li><code>.esc</code></li><li><code>.space</code></li><li><code>.up</code></li><li><code>.down</code></li><li><code>.left</code></li><li><code>.right</code></li></ul><h3 id="小结-13" tabindex="-1">小结 <a class="header-anchor" href="#小结-13" aria-hidden="true">#</a></h3><ol><li><p>监听用户回车，是哪个修饰符?</p><details><summary>答案</summary><ul><li>@keyup.enter – 只要按下回车才能触发这个键盘事件函数</li></ul></details></li></ol><h2 id="翻转世界" tabindex="-1">翻转世界 <a class="header-anchor" href="#翻转世界" aria-hidden="true">#</a></h2><h3 id="目标-21" tabindex="-1">目标 <a class="header-anchor" href="#目标-21" aria-hidden="true">#</a></h3><p>能够写出翻转世界案例</p><h3 id="需求" tabindex="-1">需求 <a class="header-anchor" href="#需求" aria-hidden="true">#</a></h3><p>需求：点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)</p><p><img src="/tingweipeng/assets/2.8.0_练习_翻转世界.51a03c4b.gif" alt="" data-fancybox="gallery"></p><p>步骤：</p><ol><li><p>定义变量 msg</p></li><li><p>使用 插值表达式 在 p标签里面 显示 msg 变量的值</p></li><li><p>给按钮绑定事件</p></li><li><p>在 methods 定义 fn 的函数</p></li><li><p>使用 split() 方法 将字符串 拆分为 数组</p></li><li><p>使用 reverse() 方法 将数组 翻转</p></li><li><p>使用 join() 方法 将数组 拼接成 字符串</p></li><li><p>将字符串 赋值为 this.msg</p></li></ol><h3 id="示例代码-1" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-1" aria-hidden="true">#</a></h3><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;{{ message }}&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> @</span><span style="color:#79C0FF;">click</span><span style="color:#C9D1D9;">=</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">btn</span><span style="color:#C9D1D9;">&quot;</span><span style="color:#C9D1D9;">&gt;逆转世界&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">template</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#FF7B72;">export</span><span style="color:#FFA657;"> </span><span style="color:#FF7B72;">default</span><span style="color:#FFA657;"> {</span></span>
<span class="line"><span style="color:#FFA657;">  </span><span style="color:#D2A8FF;">data</span><span style="color:#FFA657;">() </span><span style="color:#C9D1D9;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      message: </span><span style="color:#A5D6FF;">&quot;HELLO, WORLD&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    };</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span><span style="color:#FFA657;">,</span></span>
<span class="line"><span style="color:#FFA657;">  </span><span style="color:#C9D1D9;">methods: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">btn</span><span style="color:#C9D1D9;">(){</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.message </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.message.</span><span style="color:#D2A8FF;">split</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">reverse</span><span style="color:#C9D1D9;">().</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#FFA657;">}</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><!----><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><!----></div><div class="pager" data-v-21f75714><a class="pager-link next" href="/tingweipeng/vue%E5%9F%BA%E7%A1%80/day02.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>02-vue基础</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"ajax_day02.md\":\"e35eca52\",\"ajax_day03.md\":\"585e2c65\",\"ajax_day04.md\":\"0ca703d2\",\"ajax_index.md\":\"2b437449\",\"index.md\":\"ff5d4089\",\"js进阶_day02.md\":\"24ed742a\",\"js进阶_day03.md\":\"f0d3d414\",\"js进阶_day04.md\":\"d30bb382\",\"js进阶_index.md\":\"c6d77850\",\"vue基础_day02.md\":\"5f8c856e\",\"vue基础_day03.md\":\"7cd8d83f\",\"vue基础_index.md\":\"05339e1f\",\"webapis_day02.md\":\"0ca07905\",\"webapis_day03.md\":\"80c6b805\",\"webapis_day04.md\":\"6159ddb6\",\"webapis_day05.md\":\"fdfba8b3\",\"webapis_day06.md\":\"aaece170\",\"webapis_index.md\":\"8bdb89a3\"}")</script>
    <script type="module" async src="/tingweipeng/assets/app.bfa3a24a.js"></script>
    
  </body>
</html>